<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>测试</title>
	<script type="text/javascript" src="../jslib/EventUtil.js"></script>
	</head>
	<body>
		<input type="button" value="开启界面移动" onclick="javascript:DragDrop.enable();" />
		<input type="button" value="关闭界面移动" onclick="javascript:DragDrop.disable();" />

		<input type="button" value="click me" class="draggable" />

		<input type="text" value="" class="draggable" size=50 />


		<div class="draggable" style="width:100px;height:100px;background-color:#ff0000;border:1px solid #000;"></div>


		<script type="text/javascript">
		var DragDrop = function(){
			var dragging = null;
			var diffX = 0;
			var diffY = 0;
			
			function handleEvent(event){
				event = EventUtil.getEvent(event);
				var target = EventUtil.getTarget(event);
				switch(event.type){
					case "mousedown":
						if(target.className.indexOf("draggable") > -1){
							dragging = target;
							dragging.style.position = "absolute";
							diffX = event.clientX - target.offsetLeft;
							diffY = event.clientY - target.offsetTop;
						}
						break;
					case "mousemove":
						if(dragging !== null){
							event = EventUtil.getEvent(event);
							
							dragging.style.left = (event.clientX - diffX) + "px";
							dragging.style.top = (event.clientY - diffY) + "px";
						}
						break;
					case "mouseup":
						dragging = null;
						break;
				}
			};
			return{
				enable:function(){
					EventUtil.addHandler(document,"mousedown",handleEvent);
					EventUtil.addHandler(document,"mousemove",handleEvent);
					EventUtil.addHandler(document,"mouseup",handleEvent);
				},
				disable:function(){
					EventUtil.removeHandler(document,"mousedown",handleEvent);
					EventUtil.removeHandler(document,"mousemove",handleEvent);
					EventUtil.removeHandler(document,"mouseup",handleEvent);
				}
			}
		}();
		</script>
	</body>
</html>